<template>
  <div>
    {{ mytext }} -- {{ computedSum }}
    <button @click="handleChange">change</button>
  </div>
</template>

<script>
import { ref, computed } from 'vue'

export default {
  setup () {
    const mytext = ref('lisa')
    const computedSum = computed(() => mytext.value.substring(0, 1).toUpperCase() + mytext.value.substring(1))

    const handleChange = () => {
      mytext.value = 'json'
    }
    // 注意mytext.value
    return {
      mytext,
      computedSum,
      handleChange
    }
  }
}
</script>
